<template>
	<view class="container">
		<view class="uni-column">
			<view class="uni-column-left">
				电话号码
			</view>
			<view class="uni-column-right">
				<input class="uni-column-input" v-model="params_users.phone" disabled="disabled" focus placeholder="您的手机号"/>
			</view>
		</view>
		
		<view class="uni-column">
			<view class="uni-column-left">
				登录密码
			</view>
			<view class="uni-column-right">
				<input class="uni-column-input" v-model="params_users.pwd" focus placeholder="数字加字母，长度6-16位"/>
			</view>
		</view>
		
		<view class="uni-column">
			<view class="uni-column-left">
				重复密码
			</view>
			<view class="uni-column-right">
				<input class="uni-column-input" v-model="params_users.repwd" focus placeholder="数字加字母，长度6-16位"/>
			</view>
		</view>
		
		<view class="get-msg">
			<view class="uni-msg">
				<input class="uni-msg-input" v-model="params_users.smscode" focus placeholder="验证码" />
			</view>
			<view :class="send_pages.send_button?'send-msg':'send-msg-disable'">
		        <button @click="show_sendmsg_alert()" :disabled="!send_pages.send_button">{{send_pages.send_name}}</button>
			</view>
		</view>
		
		
		<view class="button-sp-area" @click="validatasubmit()">
		    <button class="mini-btn" type="warn" size="default">完成</button>
		</view>
	</view>
</template>

<script>
	import noauth from '../../common/api/noauth'
	import apiuser from '../../common/api/user'
	import tools from "../../common/tools"
	import {  mapMutations  } from 'vuex'
	export default {
		data() {
			return {
				params_users:{
					phone:'',
					smscode:'',
					msg_id:'',
					pwd:'',
					repwd:'',
				},
				user_info:{},
				send_pages:{
					send_name:'发送验证码',
					send_time:60,
					send_button:true,
				},
			};
		},
		onLoad(options){
			this.user_info = tools.get_storage_sync('user_info')
			this.params_users.phone = this.user_info.phone
		},
		methods:{
			//提交
			validatasubmit(){
				apiuser.set_password(this.params_users).then(res =>{
					if(res.code == 1){
						uni.showToast({
							title: '操作成功',
							duration: 2000,
							icon:"success",
						});
						setTimeout(function(){
							uni.navigateTo({
								url: '/pages/set/accountsaft'
							})
						},2000)
					}
				}).catch(res=>{
					
				});
			},
			
			//发送验证码
			show_sendmsg_alert(){
				//验证手机号
				if(this.user_info.real_phone == ''){
　　　　　　　　　　uni.showToast({
　　　　　　　　　　　　title: '请输入手机号',
　　　　　　　　　　　　icon: 'none'
　　　　　　　　　　})
					return false
				}else{
					let myreg = /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
					if (!myreg.test(this.user_info.real_phone)) {
	　　　　　　　　　　uni.showToast({
	　　　　　　　　　　　　title: '手机号码错误',
	　　　　　　　　　　　　icon: 'none'
	　　　　　　　　　　})
					  return false;
					}
				}
				//发送短信
				let send_params={phone:this.user_info.real_phone,type:3}
				noauth.send_code(send_params).then(res =>{
					if(res.code == 1){
						this.params_users.msg_id=res.data.msg_id
						let interval = setInterval(()=>{
							this.send_pages.send_time--
							this.send_pages.send_name=this.send_pages.send_time+'s'
							this.send_pages.send_button=false
							if(this.send_pages.send_time<=0){
								this.send_pages.send_name='发送验证码'
								this.send_pages.send_time=60
								this.send_pages.send_button=true
								clearInterval(interval)
							}
						}, 1000);
					}
				}).catch(res =>{
					
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
	page{
		background-color:#F5F5F5;
	}
	.container{
		width:99%;
		margin:0 auto;
		padding-top:20upx;
	}
	.uni-column{
		display:flex;
        flex-direction: row;
        flex-wrap: wrap;
		height:100upx;
		background-color:#FFFFFF;
		border-bottom:1upx solid #F5F5F5;
		.uni-column-left{
			width:28%;
			padding-left:2%;
			line-height:100upx;
		}
		.uni-column-right{
			width: 70%;
			line-height:100upx;
		}
		.uni-column-input{
			height:100upx;
			line-height:100upx;
		}
	}
	
	
	.button-sp-area{
		padding-top:100upx;
		width:80%;
		margin:0 auto;
	}
	.button-sp-area>button{
		border-radius:50upx;
	}
	
	
	/**收取验证码**/
	.get-msg{
		width: 100%;
		display:flex;
        flex-direction: row;
        flex-wrap: wrap;
		background-color: #FFFFFF;
		height:100upx;
		.uni-msg{
			width:70%;
		}
		.uni-msg-input{
			height:100upx;
			line-height:100upx;
			padding-left:2%;
		}
		.send-msg{
			width:30%;
			padding-top:10upx;
			margin-top:10upx;
		}
		.send-msg>button{
			width:90%;
			line-height:60upx;
			height:60upx;
			border:1px solid #FF3333;
			color:#FF3333;
			background-color:#FFFFFF;
			font-size:26upx;
			border-radius:40upx;
		}
		.send-msg-disable{
			width:30%;
			padding-top:10upx;
			margin-top:10upx;
		}
		.send-msg-disable>button{
			width:90%;
			line-height:60upx;
			height:60upx;
			border:1px solid #CCCCCC;
			color:#FF3333;
			background-color:#FFFFFF;
			font-size:26upx;
			border-radius:40upx;
		}
	}
	/**收取验证码结束**/
</style>
